{% extends "app.html" %}
{% block style %}
    <style>
    body {
        min-height: 100vh;
    }
    </style>
{% endblock style %}
{% block app %}
    <div class="py-10 flex flex-col items-start w-fit mx-auto">
        <div class="flex items-start justify-between mb-12 w-full">
            <h1 class="font-bold text-slate-600 text-2xl">Guides</h1>
            <a href="{% url 'chat_view' %}" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
                     class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                </svg>
            Create Guide</a>
        </div>
        <div class="overflow-auto h-[450px] bg-white rounded-box border">
            <table class="table">
                <thead class="uppercase sticky top-0">
                    <tr class="bg-slate-100 text-slate-900 text">
                        <th>Customer</th>
                        <th>Topic</th>
                        <th>Created</th>
                        <th>
                            <span class="sr-only">View</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for guide in guides %}
                        <tr class="px-4">
                            <td>{{ guide.customer }}</td>
                            <td>{{ guide.topic }}</td>
                            <td>{{ guide.created_at|date:"Y-m-d" }}</td>
                            <td>
                                <a href="{% url 'specific_chat_view' guide.id %}"
                                   class="btn btn-sm btn-neutral">View</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock app %}
